<template>
<ex-dialog v-model="visible" draggable :title="form.dictName ? form.dictName : (form.id ? form.dictName : '新增')"
	width="700" :contentHeight="450">

		<template #default>
			<el-tabs v-model="activeName" style="height: 100%">
				<el-tab-pane label="基本信息" name="base" style="height: 100%">
					<el-row :gutter="80">
						<el-col :lg="24">
							<el-form :model="form" :rules="form.dictType==='0'?menu_rules:button_rules" ref="dialogForm"
									 label-width="80px" label-position="left">
								<el-form-item v-if="!form.id" label="类型" prop="dictType">
									<ex-radio-group v-model="form.dictType" dict-code="DICT_TYPE" button></ex-radio-group>
								</el-form-item>
								<el-form-item v-else label="类型" prop="dictType">
									<ex-label code="DICT_TYPE" :value="form.dictType"/>
								</el-form-item>

								<template v-if="form.dictType==='0'">
									<el-form-item label="名称" prop="dictName">
										<el-input v-model="form.dictName" clearable placeholder="字典名称"></el-input>
									</el-form-item>
									<el-form-item label="编码" prop="dictCode">
										<el-input v-model="form.dictCode" clearable placeholder="字典编码"></el-input>
									</el-form-item>
								</template>
								<template v-if="form.dictType==='1'">
									<el-form-item v-if="!form.id" label="字典组" prop="parentLevelCode">
                    <ex-cascader v-model="form.parentLevelCode" dict-code="SysDictionary" key-prop="levelCode" placeholder="顶级资源" :params="{dictType:'0'}"></ex-cascader>
<!--										<el-cascader v-model="form.parentLevelCode" :options="dicOptions"-->
<!--													 :props="dicProps"-->
<!--													 :show-all-levels="false" placeholder="顶级资源"-->
<!--													 clearable filterable></el-cascader>-->
									</el-form-item>
									<el-form-item v-else label="所属组" prop="parentLevelCode">
										<ex-label code="SysDictionary" :value="form.parentLevelCode"/>
									</el-form-item>
									<el-form-item label="名称" prop="dictName">
										<el-input v-model="form.dictName" clearable placeholder="字典名称"></el-input>
									</el-form-item>
									<el-form-item label="字典值" prop="dictValue">
										<el-input v-model="form.dictValue" clearable placeholder=""></el-input>
									</el-form-item>
									<el-form-item label="显示颜色" prop="color">
										<el-color-picker v-model="form.color" />
									</el-form-item>

								</template>
								<el-form-item label="排序" prop="orderWeight">
									<el-input v-model="form.orderWeight" clearable placeholder="排序"></el-input>
								</el-form-item>
								<el-form-item label="备注" prop="description">
									<el-input v-model="form.description" clearable placeholder="备注"></el-input>
								</el-form-item>
							</el-form>

						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane v-if="form.dictType==='1'" label="指定角色" name="SysRole" style="height: 100%">
					<ex-rel-table ref="roleRelTable" :rel-entity="form" size="small" :treeApi="this.$API.system.role.treeData"
								  default-expand-all>提示：默认所有角色可用，若勾选之后，则只有勾选角色可用</ex-rel-table>
				</el-tab-pane>
			</el-tabs>
		</template>
		<template #footer>
			<div style="flex: auto;text-align: center">
				<el-button plain type="primary" @click="save" :loading="loading">保 存</el-button>
				<el-button plain type="warning" @click="reset" :loading="loading">重 置</el-button>
				<el-button plain type="info" @click="this.visible = false" :loading="loading">关 闭</el-button>
			</div>
		</template>

	</ex-dialog>
</template>

<script>
import scIconSelect from '@/components/scIconSelect'
import ExRelTable from "@/components/exRelTable/index.vue";
import ExLabel from "@/components/exLabel/index.vue";
import ExRadioGroup from "@/components/exRadioGroup/index.vue";
import ExCascader from "@/components/exCascader/index.vue";
import exDialog from '@/components/exDialog';
import BaseTemplate from "@/utils/baseTemplate";

export default {
	computed: {},
	emits: ['success'],
	components: {
    ExCascader,
		ExRadioGroup,
		ExLabel,
		ExRelTable,
		scIconSelect,
		exDialog
	},
	props: {
		menu: {
			type: Object, default: () => {
			}
		},
	},
	data() {
		return {
			activeName: 'base',
			visible: false,
			form: {
				id: "",
				dictName: "",
				dictCode: "",
				dictType: "",
				dictValue: "",
				description: "",
				parentLevelCode: "",
			},
			dicOptions: [],
			dicProps: {
				value: 'levelCode',
				label: 'label',
				checkStrictly: false,
				emitPath: false,
			},
			menu_rules: {
				dictType: [
					{required: true, message: "请选择字典类型", trigger: "blur"},
				],
				dictName: [
					{required: true, message: "请输入字典名称", trigger: "blur"},
				],
				dictCode: [
					{required: true, message: "请输入字典编码", trigger: "blur"},
				]
			},
			button_rules: {
				dictType: [
					{required: true, message: "请选择字典类型", trigger: "blur"},
				],
				dictName: [
					{required: true, message: "请输入字典名称", trigger: "blur"},
				],
				dictValue: [
					{required: true, message: "请输入字典值", trigger: "blur"},
				],
				parentLevelCode: [
					{required: true, message: "请选择字典组", trigger: "blur"},
				],
			},
			loading: false,
			oldForm: null,
		}
	},
	watch: {},
	mounted() {

	},
	onLoad() {
	},
	methods: {
		async initData() {
			this.dicOptions = await this.$cache.tree.options(this.$API.system.dic.treeData.storeName, {dictType:'0'});
		},
		relHandler(relMap) {
			if (!this.form.relMaps) {
				this.form.relMaps = {};
			}
			for (let key in relMap) {//清空旧的数据
				this.form.relMaps[key] = {};
			}
			//重新赋值新数据
			Object.assign(this.form.relMaps, relMap);
		},
		//显示
		open(entity) {
			this.form = Object.assign({}, entity);
			this.oldForm = Object.assign({}, this.form);
			this.visible = true;
			this.activeName = "base";
			this.initData();
		},
		reset() {
			this.form = Object.assign({}, this.oldForm);
			for(let ref in this.$refs){
				try {
					this.$refs[ref].refresh();
				}catch (e){
				}
			}
		},
		//保存
		async save() {
			let valid = await BaseTemplate.validate(this,this.$refs.dialogForm);
			if (valid) {

				try {
					this.loading = true
					var res;
					if (this.form.id) {
						res = await this.$API.system.dic.edit.post(this.form)
					} else {
						res = await this.$API.system.dic.add.post(this.form)
					}
					if (res.code === 2000) {
						this.$emit('success');
						this.$message.success(this.$t("code." + res.code));
						this.visible = false;
						this.$store.dispatch("commit",this.form.entityName);
					} else {
						this.$message.warning(res.message)
					}
				} finally {
					this.loading = false
				}
			}
		},
	}
}
</script>

<style scoped>
h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
}

[data-theme="dark"] h2 {
	color: #fff;
}

</style>
